<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>组织结构管理</title>
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" media="all" />
    <link rel="stylesheet" th:href="@{/plugins/font-awesome/css/font-awesome.min.css}" media="all" />
    <link rel="stylesheet" th:href="@{/src/css/app.css}" media="all" />
    <link rel="stylesheet" th:href="@{/src/css/themes/default.css}" media="all" id="skin" kit-skin />
    <link rel="stylesheet" th:href="@{/css/main.css}" media="all" id="skin" kit-skin />
    <style>
        .layui-tree li>a,.layui-tree li ul li>a {position: relative;}
    </style>
</head>
<body class="kit-theme layui-layout-body">
    <div class="row">
        <div class="sysNotice col" style="width: 40%;">
            <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px; height: 600px;">
                <blockquote class="layui-elem-quote">组织列表</blockquote>
                <ul id="demo" unselectable="on"></ul>
            </fieldset>
        </div>

        <div class="sysNotice col" style="width: 58%;">
            <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
                <blockquote class="layui-elem-quote" id="departmentName">根组织</blockquote>
                <div>
                    <fieldset class="layui-elem-field" style="margin: 10px 10px 30px 10px; height: 200px;">
                        <legend>组织角色</legend>
                        <div class="layui-field-box" disabled="disabled" id="departRoles"></div>
                    </fieldset>
                    <fieldset class="layui-elem-field" style="margin: 0px 10px 10px 10px; height: 200px;">
                        <legend>组织成员</legend>
                        <div class="layui-field-box" disabled="disabled" id="departStaffs"></div>
                    </fieldset>
                    <div style="margin: 30px; text-align: center; display: none;" id="buttonGroup">
                        <a class="layui-btn" data-options-type="edit" data-options-url="/auth/department/disRole.html" data-options-icon="&#xe642;" data-options-title="分配角色"
                           data-options-width="600px" data-options-height="400px">添加角色</a>
                        <a class="layui-btn layui-btn-normal" data-staff="true" data-options-type="edit" data-options-url="/auth/department/addStaff.html" data-options-icon="&#xe608;" data-options-title="添加成员"
                           data-options-width="700px" data-options-height="450px">添加成员</a>
                        <!--<a class="layui-btn layui-btn-warm">成员授权</a>-->
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
    <input type="hidden" name="departmentId" id="departmentId"/>
    <!-- 引用layer基本js -->
    <script th:src="@{/plugins/layui/layui.js}"></script>
<script>

    layui.config({
        base: '../../build/js/',
        version: '1.0.1'
    }).use(['common', 'tree'], function() {
        var $ = layui.jquery, common = layui.common;

        $.ajax({
            type: "post",
            url: '/auth/department/listDepartmentTree.json',
            dataType: 'json',
            success: function (d) {
                if(d.success) {
                    var treeMap = [];
                    var appendHtml = function(id) {
                       var html = '<span class=editGroup data-id=i style=display:none>';
                        html += '<b data-id=\'' + id + '\' data-options-type=edit data-options-url=/auth/department/add.html?parentId=' + id + ' data-options-icon=&#xe608; data-options-title=新增组织 ><i class=\'fa fa-check-square\' style=margin:4px ></i></b>';
                        html += '<b data-id=\'' + id+ '\' data-options-type=edit data-options-url=/auth/department/edit.html?id=' + id + ' data-options-icon=&#xe642; data-options-title=修改组织 ><i class=\'fa fa-pencil\' ></i></b>';
                        if(id != "-999") {
                            html += '<b data-id=\'' + id+ '\' data-options-type=delete data-options-url=/auth/department/delDepartment.json?departmentId=' + id + ' data-options-icon=&#xe640; data-options-title=删除组织 ><i class=\'fa fa-trash-o\' ></i></b>';
                        }
                        html += '</span>';
                       return html;
                    }

                    var subTree = function(nodes) {
                        var len = nodes.length;
                        treeMap.push(', "children":[');
                        for (var i = 0;i < len; i++) {
                            treeMap.push('{');
                            treeMap.push('"id":' + nodes[i]['id']);
                            treeMap.push(', "name":' + '"' + nodes[i]['text'] + appendHtml(nodes[i]['id']) + '"');
                            if (nodes[i]['children'] && nodes[i]['children'].length > 0) {
                                subTree(nodes[i]['children']);
                            }
                            if (i != len - 1) {
                                treeMap.push('},');
                            } else {
                                treeMap.push('}');
                            }
                        }
                        treeMap.push("]");
                    };
                    var transformTree = function(nodes) {
                        var len = nodes.length;
                        treeMap.push("[");
                        for (var i = 0;i < len; i++) {
                            treeMap.push("{");
                            treeMap.push('"id":' + nodes[i]['id']);
                            treeMap.push(', "name":' + '"' + nodes[i]['text'] + appendHtml(nodes[i]['id']) + '"');
                            if (nodes[i]['children'] && nodes[i]['children'].length > 0) {
                                subTree(nodes[i]['children']);
                            }
                            if (i != len - 1) {
                                treeMap.push('},');
                            } else {
                                treeMap.push('}');
                            }
                        }
                        treeMap.push("]");
                    };
                    transformTree(d.data);
                    layui.tree({
                        elem: '#demo',
                        nodes: eval(("(" + treeMap.join('') + ")")),
                        click: function (node, a) {
                            nodeClick(node.id);
                        }
                    });

                    $(".layui-tree a").on({ mouseover : function(){
                            $(this).children('cite').children('span').show();
                        } , mouseout : function(){
                            $(this).children('cite').children('span').hide();
                        }
                    });
                    // 组织结构操作项
                    editGroup();
                    buttonGroup();
                    // 绑定点击事件
                    //common.bind();
                } else {
                    common.layerErrorMsg('获取组织结构错误');
                }
            }
        })

        /**
         * 节点点击事件、显示角色和成员
         * @param departmentId
         */
        function nodeClick(departmentId) {
            if("" == departmentId) {
                common.layerErrorMsg("获取组织节点信息错误");
                return;
            }
            if(departmentId == "-999") {
                $('#departmentName').html("根组织");
                $('#departmentId').val('');
                $("#buttonGroup").hide();
            }
            $("#departmentId").val(departmentId);
            $.ajax({
                url : "/auth/department/findDepartmentInfo.json",
                type : 'post',
                data : {"departmentId": departmentId},
                cache:false,
                success : function(data) {
                    // 操作成功
                    if(data.success){
                        $('#departmentName').html(data.data.departmentName);
                        $('#departmentId').val(departmentId);
                        if (data.data.others.roles != 'undefinded') {
                            var c = [], roles = data.data.others.roles;
                            $.each(roles, function(i, val) {
                                c.push(val['roleName']);
                            });
                            $('#departRoles').html(c.join(","));
                        } else {
                            $('#departRoles').html('');
                        }
                        if (data.data.others.staffs != 'undefinded') {
                            var c = [], staffs = data.data.others.staffs;
                            $.each(staffs, function(i, val) {
                                c.push(val['realName']);
                            });
                            $('#departStaffs').html(c.join(","));
                        } else {
                            $('#departStaffs').html('');
                        }
                        // 按钮可点击
                        if(departmentId != "-999") {
                            $("#buttonGroup").show()
                        };
                    } else {
                        common.layerErrorMsg(data.message);
                    }
                },error:function(data){
                    common.layerErrorMsg("请求失败");
                }
            });
        }

        /**
         * 组织节点操作组
         */
        function editGroup() {
            $(".editGroup b").on('click', function() {
                var type = $(this).attr("data-options-type");
                var icon = $(this).attr("data-options-icon");
                var title = $(this).attr("data-options-title");
                var url = $(this).attr("data-options-url");
                var data = {
                    type: type,
                    icon: icon,
                    title: title,
                    url: url,
                    width: '500px',
                    height: '500px',
                    maxmin: true
                };
                common.layerOpen2(data);
            });
        }

        /**
         * 组织按钮操作组
         */
        function buttonGroup() {
            $("#buttonGroup a").on('click', function() {
                var departmentId = $("#departmentId").val();
                if("" == departmentId) {
                    common.layerErrorMsg("请先选择组织节点");
                    return;
                }
                if ($(this).attr('data-staff') == "true" && $("#departRoles").text() == "") {
                    common.layerErrorMsg('当前组织无角色，请先为该组织添加角色。');
                    return;
                }
                var type = $(this).attr("data-options-type");
                var icon = $(this).attr("data-options-icon");
                var title = $(this).attr("data-options-title");
                var url = $(this).attr("data-options-url");
                var width = $(this).attr("data-options-width");
                var height = $(this).attr("data-options-height");
                var data = {
                    type: type,
                    icon: icon,
                    title: title,
                    url: url + "?departmentId=" + departmentId,
                    width: width,
                    height: height,
                    maxmin: true
                };
                common.layerOpen2(data);
            });
        }
    });

</script>
</body>
</html>